<template>
  <div class="app-container app-container-userTree">
    <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true">
      <el-form-item label="用户" prop="userId">
        <Fuzzy :child="fuzzyData" :on-back-parent="onParentGet"></Fuzzy>
      </el-form-item>
      <el-form-item label="币种" prop="currency">
        <el-select
          v-model="queryParams.currency"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in currencyOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-col class="card-box">
        <el-card>
          <div slot="header">
            <span>查询结果</span>
          </div>
          <div
            class="
              el-table el-table--enable-row-hover el-table--medium
              tree-container
            "
          >
            <el-tree
              :data="userOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              ref="tree"
              v-loading="loading"
              default-expand-all
              class="tree filter-tree"
              :indent="0"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="mr10">
                  <svg-icon icon-class="jiedian" class-name="card-panel-icon" />
                  <span
                    :class="{ showUserHight: data.id == queryParams.userId }"
                    class="ml5"
                    >{{ node.label }}</span
                  >
                </span>
                <span v-if="data.gen > 0" class="mr10">({{ data.gen }}代)</span>
                <span>
                  <svg-icon
                    v-for="(levelItem, index) in data.level"
                    :key="index"
                    icon-class="dengji"
                    class-name="card-panel-icon"
                  />
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Fuzzy from '@/components/Fuzzy'
import { queryUserTree } from "@/api/biz";

export default {
  name: "UserTree",
  components: {
    Fuzzy
  },
  data () {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        userId: '',  //用户Id
        currency: undefined
      },
      // 币种状态数据字典
      currencyOptions: [
        {
          dictValue: 'BTC',
          dictLabel: 'BTC'
        },
        {
          dictValue: 'CRU',
          dictLabel: 'CRU'
        },
        {
          dictValue: 'XCH',
          dictLabel: 'XCH'
        },
        {
          dictValue: 'BZZ',
          dictLabel: 'BZZ'
        },
        {
          dictValue: 'PHA',
          dictLabel: 'PHA'
        }
      ],
      // 用户树选项
      userOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      fuzzyData: {
        echoData: [],
        echoModel: ''
      },
      rules: {
        userId: [
          { required: true, message: "请输入用户名查询", trigger: "blur" }
        ],
        currency: [
          { required: true, message: "请选择币种", trigger: "change" }
        ]
      }
    };
  },
  created () { },
  methods: {
    onParentGet (message) {
      this.userOptions = undefined
      if (message) {
        this.queryParams.userId = message;
      }
    },
    /** 查询用户下拉树结构 */
    getTreeselect (userId, currency) {
      this.loading = true;
      queryUserTree(userId, currency).then(response => {
        this.loading = false;
        this.userOptions = []
        this.$nextTick(() => {
          this.userOptions.push(response);
        });
      });
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.getTreeselect(this.queryParams.userId, this.queryParams.currency)
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.userOptions = undefined
      this.fuzzyData = {
        echoData: [],
        echoModel: ''
      }
    }
  }
};
</script>
<style lang="scss">
.app-container-userTree {
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    //justify-content: space-between;
  }
  .showUserHight {
    color: #fff;
    background: #409eff;
    padding: 4px;
  }

  /* 树形结构节点添加连线 */
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #dddddd;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #dddddd;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}
</style>
